<template>
	<view class="classContent">
		<view class="classContentblock" @click="handeleRegion">
			<view style="display: flex;align-items: center;">
				<image style="width: 64rpx;height: 64rpx;" :src="HTTP_IMG_UTL+'diqu1265@4x.png'" mode=""></image>
				<view style="margin-left: 12rpx;font-size: 28rpx;">{{$t('地区')}}</view>
			</view>
			<view class="block">
				<formCity style="margin-right: 35rpx;" texthidden="true" ref="chilRef"  :is_register="1" :item="cityItem" :is_port="is_port" @change="selCity" />
				
				<image style="width:16rpx;height:10rpx;" :src="HTTP_IMG_UTL+'right_218@2x.png'" mode=""></image>
			</view>
		</view>
		<view class="classContentblock" @click="handeleProduct">
			<view style="display: flex;align-items: center;">
				<image style="width: 64rpx;height: 64rpx;" :src="HTTP_IMG_UTL+'chanpin1266@4x.png'" mode=""></image>
				<view style="margin-left: 12rpx;font-size: 28rpx;">{{$t('产品')}}</view>
			</view>
			<view class="block">
				<view v-if="producTitle===''" style="margin-right: 40rpx;">{{$t('请选择')}}</view>
				<view v-else style="margin-right: 40rpx;">{{$t(producTitle)}}</view>
				<image style="width:16rpx;height:10rpx;" :src="HTTP_IMG_UTL+'right_218@2x.png'" mode=""></image>
			</view>
		</view>
		<!-- 底部弹窗-产品 -->
		<u-popup v-model="isShowC" mode="bottom" border-radius="32" :mask-close-able="able">
			<view class="isShowC">
				<view class="isShowC_title">
					<view @click="handeleCancel(3)" style="color: #999999;">{{$t('取消')}}</view>
					<view>{{$t('产品列表')}}</view>
					<view @click="handeleDetermine(3)">{{$t('确定')}}</view>
				</view>
				<view class="isShowC_block">
					<view @click="handeleItemC(index,item)" :class="index===index_C?'isShowC_block_c_active':'isShowC_block_c'" v-for="(item,index) in classification" :key="index">{{$t(item.title)}}</view>
				</view>
			</view>
		</u-popup>
		<view class="submit_block" >
			<view class="submit" @click="handeleSubmit">{{$t('确定')}}</view>
		</view>
	</view>
</template>

<script>
	import {
		IMAGE_URL,
		HTTP_IMG_UTL
	} from "@/config/app";
	import formCity from '../components/formCity.vue'
	export default{
		components:{
			formCity
		},
		data(){
			return{
				HTTP_IMG_UTL,
				is_port:true,
				cityItem: {
					key: "city_id",
					label: false,
					placeholder: this.$t('请选择'),
					type: "city",
					required: true,
					value: [],
					rules: {},
				},
				producTitle:'',//产品名称
				able:true,
				index_C:'',//产品选中下标
				index_C_BF:'',//产品下标选中备份
				isShowC:false,//产品弹窗
				obj:{
					page:1,
					category_id:'',//id  选择分类的ID
					goods_type:'',//选择产品的ID
					show_city:'',//地区id
				},
				classification: [ //产品名数组
					{
						id: 1,
						title: "中国货物",
						url: "https://gluz-oss.oss-cn-beijing.aliyuncs.com/uploads/20231101/99b3e2e34d1a000b681e45471d091d73.png"
					},
					{
						id: 2,
						title: "俄罗斯货物",
						url: "https://gluz-oss.oss-cn-beijing.aliyuncs.com/uploads/20231101/99b3e2e34d1a000b681e45471d091d73.png"
					},
					{
						id: 3,
						title: "在俄中国货物",
						url: "https://gluz-oss.oss-cn-beijing.aliyuncs.com/uploads/20231101/f3163bd0f89f8a641b68068176988800.png"
					},
					{
						id: 4,
						title: "在中俄罗斯货物",
						url: "https://gluz-oss.oss-cn-beijing.aliyuncs.com/uploads/20231101/f3163bd0f89f8a641b68068176988800.png"
					},
				],
			}
		},
		onLoad(options) {
			this.obj.category_id = options.id
		},
		methods:{
			handeleSubmit(){
				if(this.obj.show_city==='' && this.obj.goods_type===''){
					uni.showToast({
						title: this.$t('请至少选择一项'),
						icon: 'none'
					})
				}else{
					uni.navigateTo({
						url:'/pages/index/goodsPromotion/goodsPromotion1?obj='+JSON.stringify(this.obj)
					})
				}
				// if(this.obj.show_city===''){
				// 	uni.showToast({
				// 		title: this.$t('请选择地区'),
				// 		icon: 'none'
				// 	})
				// }else if(this.obj.goods_type===''){
				// 	uni.showToast({
				// 		title: this.$t('请选择产品'),
				// 		icon: 'none'
				// 	})
				// }else{
				// 	uni.navigateTo({
				// 		url:'/pages/index/goodsPromotion/goodsPromotion1?obj='+JSON.stringify(this.obj)
				// 	})
				// }
			},
			// 省市区选择
			selCity(key,value){
				let list = []
				value.forEach((item,index)=>{
					list.push(item.label)
				})
				this.obj.show_city = list.toString()
			},
			// 取消
			handeleCancel(index){
				// 3是产品选择
				if(index===3){
					this.index_C=this.index_C_BF
					this.isShowC = false
				}
			},
			// 确定
			handeleDetermine(index){
				// 3是产品选择
				if(index===3){
					this.index_C_BF = this.index_C
					this.obj.goods_type = this.classification[this.index_C].id  //产品id
					this.producTitle =this.classification[this.index_C].title //产品名称
					this.isShowC = false
				}
			},
			// 产品选择的选项
			handeleItemC(index,item){
				this.index_C = index //下标
				this.goods_type = item.id //选中的id
			},
			// 地区
			handeleRegion(){
				
			},
			// 产品
			handeleProduct(){
				this.isShowC = true
			}
		},
		onReady() {
			uni.setNavigationBarTitle({
				title: this.$t("采购订单")
			})
		},
	}
</script>

<style scoped>
	.submit_block{
		width: 100%;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		bottom: 130rpx;
	}
	.submit{
		color: #FFFFFF;
		font-size: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 602rpx;
		height: 93rpx;
		border-radius: 16px;
		background: #000000;
	}
	.isShowC_block{
		width: calc(100% - 100rpx);
		height: calc(100% - 130rpx);
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.isShowC_block_c_active{
		width: 308rpx;
		height: 108rpx;
		background: linear-gradient(109deg, #D3EF93 1%, rgba(229, 245, 203, 0.24) 61%);
		margin-bottom: 20rpx;
		border-radius: 16rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
		border: 1rpx solid #999999;
	}
	.isShowC_block_c{
		width: 308rpx;
		height: 108rpx;
		margin-bottom: 20rpx;
		background: #F3F3F3;
		border-radius: 16rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
	}
	.isShowA_block {
		min-width: 220rpx;
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background: #F3F3F3;
		font-size: 24rpx;
		margin: 0rpx 10rpx 20rpx 10rpx;
		margin-bottom: 20rpx;
		border-radius: 16rpx;
		padding: 0 53rpx 0 53rpx;
	}
	
	.isShowA_class {
		margin-left: 20rpx;
		// background-color: #D3EF93;
		width: calc(100% - 30rpx);
		display: flex;
		flex-wrap: wrap;
		overflow-y: scroll
	}
	
	.isShowC_title {
		width: calc(100% - 60rpx);
		height: 124rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 30rpx;
	}
	.isShowC {
		width: 100%;
		height: 383rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.block{
		font-size: 24rpx;
		/* color: #999999; */
		/* width: 140rpx; */
		height: 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.classContentblock{
		padding: 18rpx 20rpx 18rpx 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 690rpx;
		height: 100rpx;
		border-radius: 8rpx;
		background-color: #ffffff;
		margin-top: 20rpx;
	}
	.classContent{
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
</style>
<style>
	page {
		background-color: #F6F6F6;
	}
</style>